<template>
  <el-container>
    <el-header style="height: fit-content">
      <el-form label-width="80px" ref="form" v-model="form">

        <el-row :gutter="5">
          <el-col :span="8">
            <slot name="js1"></slot>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目编号">
              <el-input v-model="form.batch_id" placeholder="项目待分配" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="执行单位">
              <el-input v-model="form.company" placeholder="项目待分配" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="5">
          <el-col :span="8">
            <el-form-item label="客户名称">
              <el-input v-model="form.partner_id" placeholder="项目待分配" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目负责">
              <el-input v-model="form.leader" placeholder="项目待分配" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目电话">
              <el-input v-model="form.leader_mobile" placeholder="项目待分配" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="5">
          <el-col :span="8">
            <el-form-item label="所属部门">
              <el-input v-model="form.dept" placeholder="项目待分配" maxlength="11" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户对接">
              <el-input v-model="form.customer" placeholder="项目待分配" disabled></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="客户电话">
              <el-input v-model="form.customer_mobile" placeholder="项目待分配" maxlength="11" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="5">
          <el-col :span="8">
            <el-form-item label="项目城市" prop="city">
              <el-input v-model="form.city" placeholder="项目待分配" disabled></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="销售经理">
              <el-input v-model="form.seller" placeholder="项目待分配" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销售电话" >
              <el-input v-model="form.seller_mobile" placeholder="项目待分配" maxlength="11" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="8">
            <el-form-item label="立项时间">
              <el-input v-model="form.created_at" placeholder="项目待分配" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开始时间">
              <el-input v-model="form.start" placeholder="项目待分配" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结束时间">
              <el-input v-model="form.stop" placeholder="项目待分配" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-header>

    <el-main>
      <table class="tablex" cellpadding="0" cellspacing="0" border="1" style="table-layout: fixed; width: 100%;">
        <tr>
          <th colspan="3">预算数据</th>
          <th colspan="5">结算数据</th>
        </tr>
        <tr>
          <th class="tht oldth" style="text-align:center" >项目时间</th>
          <th class="tht oldth" colspan="2">
            <el-input v-model="ys.start" disabled></el-input>
            <el-input v-model="ys.stop" disabled></el-input>
          </th>
          <th class="tht" style="text-align:center" >项目时间</th>
          <th class="tht" colspan="4" style="text-align: left">
            <div class="fcol" style="width:100%">
              <div style="width:100%">
                <el-date-picker
                  v-model="js.start"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  size="large"
                  style="width:100%"
                  :picker-options="pickerOptionsStart"
                  :disabled="disabled"
                >
                </el-date-picker>
              </div>
              <div>
                <el-date-picker
                  v-model="js.stop"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  style="width:100%"
                  :picker-options="pickerOptionsEnd"
                  :disabled="disabled"
                >
                </el-date-picker>
              </div>
            </div>
          </th>
        </tr>

        <tr>
          <th class="tht oldth" style="text-align:center" >预算总金额</th>
          <th class="tht oldth" colspan="2">
            <el-input v-model="ys.offer" disabled></el-input>
          </th>
          <th class="tht" style="text-align:center" >结算总金额</th>
          <th class="tht" colspan="4">
            <el-input v-model="js.offer" @blur="caculateProfit(0)" @focus="$cls" :disabled="disabled"></el-input>
          </th>
        </tr>

        <tr>
          <th class="tht oldth" style="text-align:center" >预算总成本</th>
          <th class="tht oldth" colspan="2">
            <el-input v-model="ys.cost" disabled></el-input>
          </th>
          <th class="tht" style="text-align:center" >结算总成本</th>
          <th class="tht" colspan="4">
            <el-input v-model="js.cost" disabled></el-input>
          </th>
        </tr>

        <tr>
          <th class="tht oldth" style="text-align:center">预算项目</th>
          <th class="tht oldth" style="text-align:center">预算金额</th>
          <th class="tht oldth" style="text-align:center">预算备注</th>

          <th>结算项目</th>
          <th>结算金额</th>
          <th>已付金额</th>
          <th>结算备注</th>
          <th >操作</th>
        </tr>

        <tr v-for="(item,i) in costList" :key="i">
          <th class="tht oldth"><el-input v-model="item.title" disabled></el-input></th>
          <th class="tht oldth"><el-input v-model="item.ysmoney" disabled></el-input></th>
          <th class="tht oldth"><el-input v-model="item.desc" disabled></el-input></th>

          <th v-if="item.edit"><el-input v-model="item.title" :disabled="disabled"></el-input></th>
          <th v-else><el-input v-model="item.title" disabled></el-input></th>

          <th v-if="item.edit"><el-input v-model="item.jsmoney" @blur="caculateProfit(i)" :disabled="disabled"></el-input></th>
          <th v-else><el-input v-model="item.jsmoney" disabled></el-input></th>

          <th><el-input v-model="item.yf" disabled></el-input></th>

          <th v-if="item.edit"><el-input v-model="item.desc" :disabled="disabled"></el-input></th>
          <th v-else><el-input v-model="item.desc" disabled></el-input></th>

          <th v-if="item.edit"><el-button size="mini" type="danger" :disabled="disabled">移除</el-button></th>
          <th v-else><el-button size="mini" type="danger" disabled>移除</el-button></th>
        </tr>

        <tr class="xiaotradd" v-for="(vv,n) in newJs" :key="'n_' + n">
          <td class="oldth" colspan="3"></td>
          <th class="tht"><el-input v-model="vv.title" placeholder="付款标题" :disabled="disabled"></el-input></th>
          <td><el-input v-model="vv.jsmoney" placeholder="金额" @blur="caculateProfit(n,true)" @focus="$cls" :disabled="disabled"></el-input></td>
          <td><el-input v-model="vv.yf" placeholder="0.00" disabled></el-input></td>
          <td><el-input v-model="vv.desc" placeholder="备注" :disabled="disabled"></el-input></td>
          <td><el-button type="danger" size="mini" @click="delJsData(n)" :disabled="disabled">移除</el-button></td>
        </tr>

        <tr id="xiao_btn_new" v-if="is_show_btn">
          <th colspan="3" class="oldth">&nbsp;</th>
          <th colspan="5" style="text-align:center">
            <el-button type="primary" @click="addYsData">添加新行</el-button>
          </th>
        </tr>

        <tr>
          <th class="oldth">合计金额</th>
          <td class="oldth" colspan="2"><el-input v-model="ys.sub_total" disabled></el-input></td>
          <td colspan="5"><el-input v-model="js.sub_total" disabled></el-input></td>
        </tr>
        <tr>
          <th class="oldth">税费金额</th>
          <td class="oldth" colspan="2"><el-input v-model="ys.tax" disabled></el-input></td>
          <td colspan="5"><el-input v-model="js.tax" disabled></el-input></td>
        </tr>
        <tr>
          <th class="oldth">总计金额</th>
          <td class="oldth" colspan="2"><el-input v-model="ys.total" disabled></el-input></td>
          <td colspan="5"><el-input v-model="js.total" disabled></el-input></td>
        </tr>
        <tr>
          <th class="oldth">利润金额</th>
          <td class="oldth" colspan="2"><el-input v-model="ys.profit" disabled></el-input></td>
          <td colspan="5"><el-input v-model="js.profit" disabled></el-input></td>
        </tr>
        <tr>
          <th class="oldth">利润率</th>
          <td class="oldth" colspan="2"><el-input v-model="ys.percent" disabled></el-input></td>
          <td colspan="5"><el-input v-model="js.percent" disabled></el-input></td>
        </tr>
        <!--附件-->
        <tr>
          <th class="oldth">附件</th>
          <td class="oldth" valign="top" colspan="2" style="padding:0">
              <fileList :file_list="ys.file_list"></fileList>
          </td>
          <td colspan="5" valign="top">
            <MyUploadFile
              dir="js"
              v-if="is_show"
              @receiveFile="receiveFiles"
              :files="js.file_list"
              btn-name="结算附件"
              file-name="file_list"
              ref="jsUpload"
            >
            </MyUploadFile>
            <fileList :file_list="js.file_list" v-else></fileList>
          </td>
        </tr>

        <tr>
          <th class="oldth">活动附件</th>
          <td class="oldth" colspan="2"></td>
          <td colspan="5" valign="top">
            <MyUploadFile
              dir="js"
              v-if="is_show"
              @receiveFile="receiveFiles"
              :files="js.activity_list"
              btn-name="活动附件"
              file-name="activity_list"
              ref="activityUpload"
            >
            </MyUploadFile>
            <fileList :file_list="js.activity_list" v-else></fileList>
          </td>
        </tr>

        <tr>
          <th class="oldth">设计附件</th>
          <td class="oldth" colspan="2"></td>
          <td colspan="5" valign="top">
            <MyUploadFile
              dir="js"
              v-if="is_show"
              @receiveFile="receiveFiles"
              :files="js.design_list"
              btn-name="设计附件"
              file-name="design_list"
              ref="designUpload"
            >
            </MyUploadFile>
            <fileList :file_list="js.design_list" v-else></fileList>
          </td>
        </tr>

        <tr>
          <th class="oldth">销售经理</th>
          <td class="oldth" colspan="2"><el-input v-model="ys.seller" disabled></el-input></td>
          <td colspan="5"><el-input v-model="ys.seller" disabled></el-input></td>
        </tr>

        <tr>
          <th class="oldth">备注信息</th>
          <td class="tht oldth" colspan="2" valign="top">
            <el-input type="textarea" v-model="ys.desc" disabled show-word-limit  maxlength="1500"></el-input>
          </td>
          <td class="tht" colspan="5" valign="top">
            <el-input type="textarea" v-model="js.desc" show-word-limit  maxlength="1500" :disabled="disabled"></el-input>
          </td>
        </tr>
<!--        审批记录-->
        <tr>
          <td class="tht oldth" colspan="3" valign="top">
            <div style="text-align: left;width: 100%;"><history :history="ys.history"></history></div>
          </td>
          <td class="tht" colspan="5" valign="top">
            <div style="text-align: left;width: 100%;"><history :history="js.history"></history></div>
          </td>
        </tr>

        <tr>
          <td colspan="8" style="text-align: center;" v-if="is_show_btn">
            <el-button type="primary" @click="commit(0)">{{btn}}</el-button>
            <el-button type="primary" @click="commit(1)">保存</el-button>
            <el-button type="info">重置</el-button>
          </td>
        </tr>





      </table>
    </el-main>
  </el-container>
</template>

<script>
    import history from "../common/history";
    import fileList from "../common/fileList.vue";
    import uploadFile from "../common/uploadFile.vue";
    import MyUploadFile from "../common/MyUploadFile.vue";
    import {calculateProfitApi} from '@/apilist/Project';
    export default {
        name: "jsPage",
        data(){
            return {
                upload_url: this.fun.APP_VUE_UPLOAD_URL,
                file_list:[],
                activity_list:[],
                design_list:[],
                note_list:[],

              //时间限制，符合日期先后顺序的实际情况
              pickerOptionsStart: {
                disabledDate: time => {
                  if (this.ys.start) {
                    return  time.getTime() <= new Date(this.ys.start).getTime()  /*开始日期要在选择的结束日期之前*/
                  }
                  // return time.getTime() < Date.now() - 8.64e7; /*今天及以后*/
                  return time.getTime() > Date.now() - 8.64e6; /*今天及之前，注意数字不一样*/
                }
              },
              pickerOptionsEnd: {
                disabledDate: time => {
                  if (this.js.start) {
                    let jsStart = new Date(this.js.start).getTime();
                    let ysStop = new Date(this.ys.stop).getTime();
                    if(jsStart < ysStop){
                      return time.getTime() < ysStop;
                    }else{
                      return time.getTime() < jsStart;
                    }
                  }
                  return time.getTime() > Date.now() - 8.64e6; /*今天及之前*/
                }
              }



            }
        },
        props:['form','js','ys','costList','newJs','is_hidden','disabled','is_show','is_show_btn','btn'],
        components: {history,fileList,uploadFile,MyUploadFile},
        computed:{
          fileJs(){
            return {'dir': 'js',name: 'file_list','btnName': "上传结算附件",fileList:this.js.file_list};
          },
          fileActivity(){
            return {'dir': 'js',name: 'activity_list','btnName': "上传活动附件",fileList:this.js.activity_list}
          },
          fileDesign(){
            return {'dir': 'js',name: 'design_list','btnName': "上传设计附件",fileList:this.js.design_list}
          },
          fileNote(){
            return {'dir': 'js',name: 'note_list','btnName': "附件",fileList:this.js.note_list};
          },
        },
        methods: {
           delJsData(i){
               this.newJs.splice(i,1);
               this.caculateProfit()
           },

           addYsData(){
               let js = {id:0,title:'',jsmoney: '0.00',yf: '0.00',desc: '',paytype: 4,disabled:false}
               this.newJs.push(js)
               this.$emit("changeJs",this.js,this.newJs,this.costList);
               //this.caculateProfit()
           },


           //计算利润
           caculateProfit(i=0,is_new=false){
            if(is_new){
              let money = this.newJs[i]['jsmoney']
              money = this.fun.resetMoney(money)
              //console.log('money',money, money == 0)
              this.newJs[i]['jsmoney'] = money == 0 ? "0.00" : this.fun.fmoney(money,2)
            }else{
              let money = this.costList[i]['jsmoney']
              money = this.fun.resetMoney(money)
              this.costList[i]['jsmoney'] = this.fun.fmoney(money,2)
            }
             calculateProfitApi({
               offer: this.js.offer,
               rate: this.form.rate,
               ysData: this.costList,
               newJs: this.newJs,
             }).then(res => {
               this.js.sub_total = res.data.sub_total;
               this.js.cost = res.data.cost;
               this.js.total = res.data.total;
               this.js.percent = res.data.percent;
               this.js.profit = res.data.profit;
               this.js.tax = res.data.tax;
               this.js.offer = res.data.ysmoney;
             });
               this.$emit('changeJs',this.js,this.newJs,this.costList)
           },
            //提交
            commit(is_save){
               this.$emit('commit',is_save)
            },
          //接受fileList
          receiveFiles(file,name){
            this.$emit("changeFile",file,name)
          },
          //获取组件中的上传列表
          getFileListByRef(ref){
             return this.$refs[ref].getNewFileList();
          }

       },
    }
</script>

<style scoped>
  .tablex{
    border: 1px solid #fff;border-collapse: collapse; width:100%;text-align:center;
  }
  .tablex th,.tablex td{
    border: 1px solid #fff;padding: 10px;
    background-color: #F3F4F9;
  }

  .tablex .oldth{
    background-color: #ACABB1;
  }
</style>
